import React, {Component} from 'react';
import {
  Text,
  StyleSheet,
  View,
  FlatList,
  TouchableOpacity,
  Image,
  Dimensions,
  ActivityIndicator,
} from 'react-native';

const {width, height} = Dimensions.get('screen');

const rpx = x => (width / 750) * x;

export default class Products extends Component {
  url = 'http://101.96.128.94:9999/data/product/list.php?pno=';

  //网络请求的默认值null, 使用时必须做判断, 否则报错!
  state = {res: null, refreshing: false};

  componentDidMount() {
    const url = this.url + 1;

    fetch(url)
      .then(res => res.json())
      .then(res => {
        console.log(res);

        this.setState({res}); //{res: res}
      });
  }

  render() {
    // res: 来自网络请求, 默认null
    if (!this.state.res) return <View />;

    return (
      <FlatList
        data={this.state.res.data}
        keyExtractor={(item, index) => index + ''}
        renderItem={this._renderItem}
        ItemSeparatorComponent={() => (
          <View style={{height: 1, backgroundColor: 'gray'}} />
        )}
        ListFooterComponent={this._ListFooterComponent}
        onEndReachedThreshold={0.1}
        onEndReached={this._onEndReached}
        onRefresh={this._onRefresh}
        refreshing={this.state.refreshing}
      />
    );
  }

  _onRefresh = () => {
    this.setState({refreshing: true});

    fetch(this.url + 1)
      .then(res => res.json())
      .then(res => {
        console.log(res);

        this.setState({res, refreshing: false});
      });
  };

  _onEndReached = () => {
    // 如果已经是最后一页, 则不需要加载更多
    const {pno, pageCount, data} = this.state.res; //快速解包写法
    if (pno == pageCount) return; // 当前页 == 总页数,  return终止代码执行

    const nextPage = pno + 1;

    fetch(this.url + nextPage)
      .then(res => res.json())
      .then(res => {
        console.log(res);
        //新旧数据合并
        res.data = data.concat(res.data);
        this.setState({res});
      });
  };

  _ListFooterComponent = () => {
    // 当前页 == 总页数, 则显示没有更多数据
    const {pno, pageCount} = this.state.res;
    if (pno == pageCount) {
      return (
        <View style={{padding: 10, alignItems: 'center'}}>
          <Text style={{fontSize: rpx(30)}}>没有更多数据了</Text>
        </View>
      );
    }

    return (
      <View style={{padding: 10, alignItems: 'center'}}>
        <ActivityIndicator color="#007acc" size="large" />
        <Text style={{fontSize: rpx(30)}}>加载中...</Text>
      </View>
    );
  };

  _renderItem = ({item}) => {
    return (
      <TouchableOpacity
        onPress={() => this.props.navigation.push('Detail', {lid: item.lid})}
        style={{flexDirection: 'row', backgroundColor: 'white'}}>
        <Image
          style={{width: rpx(200), height: rpx(200)}}
          source={{uri: 'http://101.96.128.94:9999/' + item.pic}}
        />
        <View style={{flex: 1, margin: 10, justifyContent: 'space-around'}}>
          <Text style={{fontSize: rpx(30)}} numberOfLines={2}>
            {item.title}
          </Text>
          <Text style={{color: 'red', fontSize: rpx(33)}}>¥{item.price}</Text>
        </View>
      </TouchableOpacity>
    );
  };
}

const styles = StyleSheet.create({});
